<template>
  <div class="maintain_box">
    <!--    :style="{height:style_height.height,width:style_height.width}"-->
    <div :id="demo_class" :style="{height:style_height.height,width:style_height.width}"></div>
    <!--    <div class="bottom_description">-->
    <!--      <div class="device_basic">-->
    <!--        <span>总计：</span><span>{{ data_pie.data.tendingValue }} h</span>-->
    <!--      </div>-->
    <!--      <div class="device_basic">-->
    <!--        <span>剩余：</span><span :style="{color:'red'}">{{ data_pie.data.tHour }} h</span>-->
    <!--      </div>-->
    <!--      <div class="device_basic">-->
    <!--        <span>设备名称：</span><span>{{ data_pie.data.uEquipmentCode }}</span>-->
    <!--      </div>-->
    <!--    </div>-->

    <!--    <div class="next_page device_basic">-->
    <!--      <span>切换</span>-->
    <!--    </div>-->
  </div>
</template>

<script>
import {get_count_down} from "@/api/cockpit/data"
import {reactive, onMounted, ref, inject} from "vue"
import {maintain_pie_option} from "@/utils/echarts_option/maintain_pie";
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  name: "maintain_pie",
  props: {
    demo_class: ""
  },
  setup(props, context) {
    let echarts = inject("echarts");//引入

    const style_height = reactive({
      height: "",
      width: ""
    })


    const data_pie = reactive({
      data: {
        equipmentName: "气保焊机",
        tHour: 8.64,
        tendingValue: 100,
        uEquipmentCode: "HJKLY4010030",
      }
    })
    /**
     * 获取数据
     * */
    const get_data = async () => {
      const {height, width} = get_style_dom(props.demo_class)
      style_height.height = height;
      style_height.width = width;
      const res = await get_count_down()
      if (res.code === 1) {
        console.log(res)
        data_pie.data = res.data
        const op = change_option(maintain_pie_option, res.data)
        init_charts(op)
      }
    }

    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }
    /**
     * 数据初始化
     * */
    onMounted(() => {
      // get_data()
    })

    const init = () => {
      get_data()
    }

    const change_option = (e, data) => {
      const data_title = data.tHour
      let data_tendingValue = 0;
      try {
        data_tendingValue = (data.tendingValue - data_title).toFixed(2)
      } catch (e) {
        data_tendingValue = data.tendingValue - data_title;
      }
      e.title.text = data_title + 'h'
      e.title.subtext = '总计：' + data.tendingValue + 'h'
      e.series[0].data[0].value = data_title
      e.series[0].data[0].name = "有效：" + data_title + "h"
      e.series[0].data[1].value = data_tendingValue
      e.series[0].data[1].name = "消耗：" + data_tendingValue + "h"
      return e
    }

    const init_charts = (op) => {

      let myChart = echarts.init(document.getElementById(props.demo_class));
      myChart.setOption(op)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
    return {
      data_pie,
      style_height,
      init
    }
  },
}
</script>

<style scoped lang="scss">


.maintain_box {
  position: relative;
  height: 10rem;
  display: flex;
  flex-direction: row;

  .bottom_description {
    //position: absolute;
    //bottom: 0;
    //left: 0;
    flex: 1;
    height: 10rem;
    //z-index:9999;
    .device_basic {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      color: #67e1fa;
      font-size: 14px;
    }
  }

  .next_page {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
}
</style>
